<template>
    <div>
        <el-card class="box-card">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>智慧书店</el-breadcrumb-item>
                <el-breadcrumb-item>添加书籍</el-breadcrumb-item>
            </el-breadcrumb>
            <hr>
            <el-form ref="book" :model="book" label-width="100px">
                <el-form-item label="书籍图片">
                    <el-upload
                            :on-success="upload"
                            action="http://localhost:8001/book/uploadImg"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="书籍名字">
                    <el-input v-model="book.bookName"></el-input>
                </el-form-item>
                <el-form-item label="书籍作者">
                    <el-input v-model="book.author"></el-input>
                </el-form-item>
                <el-form-item label="图书出版社">
                    <el-input v-model="book.publishingHouse"></el-input>
                </el-form-item>
                <el-form-item label="图书简介">
                    <el-input v-model="book.briefIntroduction"></el-input>
                </el-form-item>
                <el-form-item label="图书描述">
                    <el-input v-model="book.bookDesc"></el-input>
                </el-form-item>
                <el-form-item label="图书类型">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                        <el-checkbox-group v-model="book.tbBookTypeList" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="type in bookTypeList" :label="type.code" :key="type.code">
                                {{type.bookTypeName}}
                            </el-checkbox>
                        </el-checkbox-group>
                </el-form-item>
                <el-form-item label="书籍价格">
                    <el-input v-model="book.bookPrice"></el-input>
                </el-form-item>
                <el-form-item label="图书供货方">
                    <el-input v-model="book.supplyingParty"></el-input>
                </el-form-item>
                <hr>
                <el-form-item label="商品单品">
                    <el-button @click="dialogFormVisible = true">添加单品</el-button>
                </el-form-item>
                <el-form-item label="单品明细">
                    <el-table :data="book.tbBookSingleList" border style="width: 100%;height: 100%">
                        <el-table-column prop="rfid" label="书籍RFID"></el-table-column>
                        <el-table-column prop="qrCode" label="识别二维码"></el-table-column>
                        <el-table-column label="操作" type="index">
                            <template slot-scope="scope">
                                <el-button @click="delSingle(scope.row.rfid)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addBook">保存</el-button>
                </el-form-item>
            </el-form>

            <div>
                <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                    <el-form :model="single">
                        <el-form-item label="书籍RFID" :label-width="formLabelWidth">
                            <el-input v-model="single.rfid" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="识别二维码" :label-width="formLabelWidth">
                            <el-input v-model="single.qrCode" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addSingle">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Add",
        data(){
            return{
                book:{
                    bookName:'',
                    author:'',
                    publishingHouse:'',
                    bookDesc:'',
                    bookPrice:'',
                    supplyingParty:'',
                    briefIntroduction:'',
                    bookTypeCodes:'',
                    tbBookTypeList:[],
                    tbBookSingleList:[],
                    bookImgCodes:''
                },
                single:{
                    rfid:'',
                    qrCode:''
                },
                dialogImageUrl: '',
                dialogVisible: false,
                checkAll: false,
                isIndeterminate:false,
                dialogTableVisible: false,
                dialogFormVisible: false,
                formLabelWidth: '120px',
                bookTypeList:[],
            }
        },methods:{
            handleRemove(file, fileList) {
                var bookImgCodes = this.book.bookImgCodes;
                if (bookImgCodes.indexOf(',') == -1) {
                    bookImgCodes = bookImgCodes.replace(file.response.result.imgUrl, '')
                }else {
                    if(bookImgCodes.indexOf(file.response.result.imgUrl) == 0){
                        bookImgCodes = bookImgCodes.replace(file.response.result.imgUrl+',', '')
                    }else {
                        bookImgCodes = bookImgCodes.replace(','+file.response.result.imgUrl, '')
                    }
                }
                this.book.bookImgCodes = bookImgCodes;
                console.log(this.book.bookImgCodes)
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleCheckAllChange(val) {
                if(val) {
                    for(let codes=0; codes<this.bookTypeList.length;codes++)
                    this.book.tbBookTypeList.push(this.bookTypeList[codes].code);
                }
                else {
                    this.book.tbBookTypeList = [];
                }
                //this.book.tbBookTypeList = val ? this.bookTypeList : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.bookTypeList.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.bookTypeList.length;
            },
            findTypeList(){
              this.$http.post('book/findAllBookType').then(res =>{
                    if (res.data.success){
                        this.bookTypeList = res.data.result.bookTypeList;
                    }else {
                        this.$message.error(res.data.message);
                    }
                })
            },addBook(){
                for(let codes=0; codes<this.book.tbBookTypeList.length; codes++) {
                    this.book.bookTypeCodes += ',' + this.book.tbBookTypeList[codes];
                }
                this.book.bookTypeCodes = this.book.bookTypeCodes.substring(1);
                this.book.tbBookTypeList = []
                this.$http.post('book/addBookDetailed',this.book).then(res =>{
                    if (res.data.success){
                        this.$message.success('添加成功');
                        this.$router.push({name:'BookList'})
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                console.log(this.book);
                //
            },addSingle(){
                this.book.tbBookSingleList.push(this.single);
                this.single = {};
                this.dialogFormVisible = false;
            },upload(res){
                if (this.book.bookImgCodes != ''){
                    this.book.bookImgCodes += ',';
                }
                this.book.bookImgCodes += res.result.imgUrl;
            },delSingle(rfid){
                var index = this.book.tbBookSingleList.findIndex(item =>{
                    if(item.rfid==rfid){
                        return true;
                    }
                });
                this.book.tbBookSingleList.splice(index,1);
            }
        },mounted(){
            this.findTypeList();
        }
    }
</script>

<style scoped>

</style>
